/**
 * Created by Administrator on 2017/4/25.
 */
function Circle() {
    this.rate=window.innerWidth/640;//屏幕换算比例
    this.radius = 175*this.rate;    // 圆环半径
    this.x=200*this.rate;
    this.y=200*this.rate;
    this.lineWidth =15*this.rate;  // 圆环边的宽度
    this.strokeStyle = "#86E1E6"; //'rgba(255,255,255,0.3)'; //边的颜色
    this.fillStyle = '#F7EB9B';  //填充色
    this.lineCap = 'round';
}
Circle.prototype.draw = function(ctx) {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, Math.PI*0.25, Math.PI*0.75, true);  // 坐标为250的圆，这里起始角度是0，结束角度是Math.PI*2
    ctx.lineWidth = this.lineWidth;
    ctx.strokeStyle = this.strokeStyle;
    ctx.lineCap = 'round';
    ctx.stroke();  // 这里用stroke画一个空心圆，想填充颜色的童鞋可以用fill方法
};
function Ring( percent,startAngle) {
    Circle.call(this);
    this.startAngle = 0.75*Math.PI; //弧起始角度
    this.percent = percent;  //弧占的比例
}
Ring.prototype = Object.create(Circle.prototype);
Ring.prototype.drawRing = function(ctx) {
    this.draw(ctx);  // 调用Circle的draw方法画圈圈
    // angle
    ctx.beginPath();
    var anglePerSec = 2 * Math.PI / (100 / this.percent); // 蓝色的弧度
    ctx.lineWidth=this.lineWidth;
    ctx.strokeStyle = this.fillStyle;
    ctx.lineCap = this.lineCap;
    ctx.stroke();
    ctx.closePath();
};
Ring.prototype.drawRing1 = function(ctx) {
    var count = 0, that = this, times = 20, // 分十次绘制蓝弧
        startAngle = this.startAngle,
        endAngle = startAngle; // draw background cirle this.draw(ctx);
    var handle = setInterval(function() {
        if (count == times) { clearInterval(handle); } // angle
        ctx.beginPath();
        var anglePerSec = 1.5 * Math.PI * (that.percent / 100) / times; // 每个间隔滑动的弧度
        ctx.arc(that.x,that.y, that.radius, 0.75*Math.PI, endAngle, false); //这里的圆心坐标要和cirle的保持一致
        ctx.strokeStyle = that.fillStyle;
        ctx.lineWidth=that.lineWidth;

        ctx.lineCap = that.lineCap;
        ctx.stroke();
        ctx.closePath();
        startAngle += anglePerSec - 0.012; // 消除每次绘环间的计算误差，防止出现空隙
        endAngle = startAngle + anglePerSec;
        count++;
    }, 60);// 这里定义每60ms绘制一次
} ;
    var canvas1=document.getElementById("canvas1");
    $(canvas1).css({"position":"absolute","top":"0.1rem","left":"1.2rem","zIndex":'1'});
    canvas1.width=canvas1.width*window.innerWidth/640;
    canvas1.height=canvas1.width;
    var ctx1=canvas1.getContext("2d");
    var ring1 = new Ring(0);    //括号中参数只要输入百分比数值即可
    ring1.drawRing(ctx1);
    var canvas=document.getElementById("canvas");
            $(canvas).css({"position":"absolute","top":"0.1rem","left":"1.2rem","zIndex":'2'});
    canvas.width=canvas.width*window.innerWidth/640;
    canvas.height=canvas.width;
    var ctx=canvas.getContext("2d");
    var ring = new Ring(60);    //括号中参数只要输入百分比数值即可
    ring.drawRing1(ctx);